/* 家长和高龄儿童 */
<template>
	<div class='store-role1'>
		<TopNav
			showInform
			showAvatar
			showNavs
			color="#00493E"
			msgColor="#01937C"
		/>
		<div class="container">
			<!-- 分类 -->
			<div class="types">
				<Button
					class="item"
					v-for="item in types"
					:key="item.value"
					:bgColor="item.value === selectType ? '#00C9A9' : '#EFF3F3'"
					:color="item.value === selectType ? '#ffffff' : 'rgba(0,0,0,0.55)'"
					width="160"
					height="48"
					@click="selectType=item.value"
				>
					{{item.label}}
				</Button>
			</div>
			<Commodities
				column="4"
				:commoditiesType="selectType"
			/>
			<img
				class="shopping-cart"
				src="https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/20220312092942889-Group 82.png"
			>
		</div>
	</div>
</template>

<script>
export default {
  data() {
    return {
      types: [
        { label: '材料', value: 'materials' },
        { label: '工具', value: 'tool' },
        { label: '个性化定制', value: 'customization' },
      ],
      selectType: 'materials'
    }
  },
  watch: {
    selectType: function(val) {
      this.$replaceTo(this.$route.name, { type: val })
    }
  },
  created() {
    this.selectType = this.$route.query.type || 'materials'
  }
}
</script>

<style lang='scss' scoped>
.store-role1 {
  padding-top: 78px;
  background-color: $bgColor1;

  .container {
    padding: 30px 50px;
    background-color: #ffffff;
    border-radius: 30px 30px 0 0;

    .shopping-cart {
      position: fixed;
      right: 30px;
      bottom: 40px;
      z-index: 100;
      width: 80px;
      cursor: pointer;
    }

    .types {
      margin-bottom: 60px;
      text-align: center;

      .item:not(:last-of-type) {
        margin-right: 20px;
      }
    }
  }
}
</style>
